<template>
  <div>
    <div class="demo">
      <div class="demo-item">
        普通input
        <KunkkaInput :model="studyModel" :prop="prop1" />
      </div>

      <div class="demo-item">
        disabled input
        <KunkkaInput :model="studyModel" :prop="prop2" :disabled="disabled" />
      </div>
      <div class="demo-item">
        size不同的input
        <KunkkaInput :model="studyModel" :prop="prop2" size="medium " />
      </div>
    </div>

    <div class="markdown-body">
      <readme />
    </div>
  </div>
</template>

<script>
import Readme from './readme.md'
export default {
  name: 'InputDoc',
  components: { Readme },
  data() {
    return {
      studyModel: {
        student1: 'kunkka-input测试',
        student2: 'kunkka-input测试2'
      },
      prop1: 'student1',
      prop2: 'student2',
      disabled: true
    }
  }
}
</script>

<style lang="scss" scoped>
.demo {
  display: inline-block;
  .demo-item {
    margin-left: 20px;
    display: inline-block;
  }
}
</style>
